import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

export function RecentSales() {
  return (
    <div className="space-y-8">
      <div className="flex items-center">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/avatars/01.png" alt="头像" />
          <AvatarFallback>笔记</AvatarFallback>
        </Avatar>
        <div className="ml-4 space-y-1">
          <p className="text-sm font-medium leading-none">React Hooks最佳实践</p>
          <p className="text-xs text-muted-foreground">
            技术笔记 • 2小时前
          </p>
        </div>
        <div className="ml-auto text-xs">已完成</div>
      </div>

      <div className="flex items-center">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/avatars/02.png" alt="头像" />
          <AvatarFallback>任务</AvatarFallback>
        </Avatar>
        <div className="ml-4 space-y-1">
          <p className="text-sm font-medium leading-none">完成项目文档</p>
          <p className="text-xs text-muted-foreground">
            工作任务 • 进行中
          </p>
        </div>
        <div className="ml-auto text-xs">待处理</div>
      </div>

      <div className="flex items-center">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/avatars/03.png" alt="头像" />
          <AvatarFallback>王</AvatarFallback>
        </Avatar>
        <div className="ml-4 space-y-1">
          <p className="text-sm font-medium leading-none">王小军</p>
          <p className="text-sm text-muted-foreground">
            xiaojun@example.com
          </p>
        </div>
        <div className="ml-auto font-medium">+¥999.00</div>
      </div>

      <div className="flex items-center">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/avatars/04.png" alt="头像" />
          <AvatarFallback>赵</AvatarFallback>
        </Avatar>
        <div className="ml-4 space-y-1">
          <p className="text-sm font-medium leading-none">赵小红</p>
          <p className="text-sm text-muted-foreground">
            xiaohong@example.com
          </p>
        </div>
        <div className="ml-auto font-medium">+¥3,899.00</div>
      </div>

      <div className="flex items-center">
        <Avatar className="h-9 w-9">
          <AvatarImage src="/avatars/05.png" alt="头像" />
          <AvatarFallback>陈</AvatarFallback>
        </Avatar>
        <div className="ml-4 space-y-1">
          <p className="text-sm font-medium leading-none">陈小琳</p>
          <p className="text-sm text-muted-foreground">
            xiaolin@example.com
          </p>
        </div>
        <div className="ml-auto font-medium">+¥5,999.00</div>
      </div>
    </div>
  );
}
